<template>
	<view class="content"> 
		<scroll-view class="scroll-Y" scroll-y="true" refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<view class="list" v-for="(item, index) in listData" :key="index">
				<view class="item" @click="goDetail(item)">
					<view class="item-titel">{{item.title}}</view>
					<view class="item-content">{{item.content}}</view>
					<view class="item-time">{{item.time}}</view>
					<view v-if="showElement" class="unread-view"></view>
				</view>
			</view>
			<!-- 空状态显示 -->
			<view v-if="!loading && listData.length === 0" class="empty-state">
				<text>{{ $t('message.noMessages') }}</text>
			</view>
			<!-- 加载更多提示 -->
			<view v-if="listData.length > 10" class="loading-more">
				<text v-if="loading">{{ $t('message.loading') }}</text>
				<text v-else-if="noMore">{{ $t('message.noMoreData') }}</text>
				<text v-else>{{ $t('message.pullLoadMore') }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [
					// {
					// 	title: "系统通知",
					// 	content: "系统将在6月25号进行升级",
					// 	time: "2025-6-11 15:00"
					// },
					// {
					// 	title: "设备干扰通知",
					// 	content: "A区域打鱼机1号位被电磁脉冲干扰",
					// 	time: "2025-6-11 15:00"
					// },
					// {
					// 	title: "订单投诉通知",
					// 	content: "当前存在用户订单投诉，为避免投诉过多造成收款账户被封，请商家及时处理！！如若商家未处理，系统将在3天后自动退款！",
					// 	time: "2025-6-11 15:00"
					// }
				], // 列表数据
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				refreshing: false, // 是否正在下拉刷新
				loading: false, // 是否正在加载
				noMore: false, // 是否没有更多数据
				loadDataType: 1, //加载数据类型 1套票 2储值 3会员 4商品
				showElement:true,
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.message')
			});
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.message')
			});
		},
		methods: { 
			goDetail(item){
				uni.navigateTo({
				    url: `/pages/message/message-detail?content=${item.content}`
				  });
			},
			// 加载数据
			async loadData() {
				if (this.loading) return;

				this.loading = true;

				try {
					// 这里替换为你的实际API接口
					const res = await uni.request({
						url: 'https://your-api-url.com/list',
						method: 'GET',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize
						}
					});

					const data = res[1].data; // uni.request返回的是数组，data在第二个元素

					if (this.pageNum === 1) {
						this.listData = data.list || [];
					} else {
						this.listData = [...this.listData, ...(data.list || [])];
					}

					// 判断是否还有更多数据
					this.noMore = data.list.length < this.pageSize;

				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: this.$t('message.loadFailed'),
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},

			// 下拉刷新
			onRefresh() {
				if (this.refreshing) return;
				this.refreshing = true;
				this.pageNum = 1;
				this.noMore = false;
				this.loadData();
			},

			// 上拉加载更多
			loadMore() {
				if (this.loading || this.noMore) return;
				this.pageNum++;
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.tab-date {
		justify-content: center;
		background-color: white;
		width: 100%;
	}
	.scroll-Y {
		width: 100%;
		flex: 1;
		margin-top: 10rpx;
	}
	
	.loading-more {
		padding: 20rpx;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}
	
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		color: #999;
		font-size: 32rpx;
	}
	
	.list {
		display: flex;
		height: fit-content;
	
	}
	
	.item {
		height: fit-content;
		flex-direction: column;
		background-color: white;
		margin-bottom: 3rpx;
		padding: 20rpx 15rpx 20rpx 15rpx;
		width: 100%;
		position: relative;
	}
	.item-titel {
		color: black;
		position: relative;
		font-size: 30rpx;
		font-weight: 700;
	}
	.item-content{
		position: relative;
		margin-top: 10rpx;
		margin-right: 55rpx;
	}
	.item-time{
		position: absolute;
		top: 15rpx;
		right:15rpx;
	}
	.unread-view{
		position: absolute;
		right: 15rpx;
		top: 80rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: red;
		border-radius: 20rpx;
		
	}
	.cotnent {
		display: flex;
	}
	
	.content-row {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		flex: 1;
	}
	
	.content-title {
		color: gray;
	}
	
	.content-value {}
</style>